document.ready(function () {
    // 1.聚焦到(focus)到input框时,给当前input框添加边框线
    // 获取元素
    let inputAll = document.querySelectorAll('.main .userInput');
    let imgAll = document.querySelectorAll('.main img');
    let errImg = document.querySelectorAll('.main .errImg');
    let agreeBtn = document.querySelector('.main .agreeBtn');
    let registerBtn = document.querySelector('.main .registerBtn');

    // 4.需求: 定义好正则表达式(验证规则)
    let reg = [
        /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/,//账号:6-12位,字母开头,后面跟数字字母
        /^1[345678][0-9]{9}$/, //手机号
        /^[a-zA-Z][a-zA-Z0-9_]{3}$/,//验证码:4位,字母开头,后面跟数字字母
        /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/ //密码
    ];

    inputAll.forEach(function (v, i) {
        v.addEventListener('focus', function () {
            v.style.borderColor = '#00bdff';
        });

        // 2.输入事件判断当前输入值得长度,如果大于零,显示删除按钮,否则隐藏
        v.addEventListener('input', function () {
            if (v.value) {
                imgAll[i].style.display = 'block';
            } else {
                imgAll[i].style.display = 'none';
            }
        })

        // 3.点击删除按钮,清空当前输入得数据
        imgAll.forEach(function (v) {
            v.addEventListener('click', function () {
                inputAll[i].value = '';
                v.style.display = 'none';
            })
        })

        // 5.需求: 失去焦点, 验证输入信息的合法性, 如果不合法: 显示错误提示信息, 否则:就隐藏
        v.addEventListener('blur', function () {
            v.style.borderColor = '#c5c5c5';
            let result = reg[i].test(v.value);
            if (result) {
                errImg[i].style.opacity = '0';
            } else {
                errImg[i].style.opacity = '1';
            }
        })
    })

    // 6.需求: 点击registerBtn按钮, 将registerBtn改变背景色, 并取消禁用
    agreeBtn.addEventListener('change', function () {
        if (agreeBtn.checked) {
            registerBtn.style.backgroundColor = '#00cbff';
            registerBtn.style.color = '#fff';
            registerBtn.style.cursor = 'pointer';
            registerBtn.disabled = false;
        } else {
            registerBtn.style.backgroundColor = '';
            registerBtn.style.color = '';
            registerBtn.style.cursor = 'default';
            registerBtn.disabled = true;
        }

    })

    // 7.需求: 点击立即注册,验证输入信息合法性
    registerBtn.addEventListener('click', function () {
        for (let i = 0; i < inputAll.length; i++) {
            if (reg[i].test(inputAll[i].value)) {
                errImg[i].style.opacity = '0';
            } else {
                errImg[i].style.opacity = '1';
                return;
            }
        }
        location.href = './login.html';
        for (let i = 0; i < inputAll.length; i++) {
            inputAll[i].value = '';
        }

    })

})